<template>
	<view class="new_fllow">
		<view class="fllow_form">
			<view><text>*</text>消费日期</view>
			<picker mode="date" @change="changeTime">
				<view class="form_right">
					<view :class="consume_time ? 'valueActive' : '' ">{{consume_time ? consume_time : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>消费方式</view>
			<picker :value="index" @change="changeType" :range="typeList">
				<view class="form_right">
					<view :class="consume_type ? 'valueActive' : '' ">{{consume_type ? consume_type : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>消费金额</view>
			<view class="form_input" >
				<input 
					type="text" :class="money ? 'valueActive' : '' " v-model="money"  placeholder-style="font-size:30rpx;color: #999;" placeholder="请输入消费金额" class="">
			</view>
		</view>
		<view class="fllow_area">
			<view class="area_head">备注</view>
			<textarea v-model="remark" :class="remark ? 'valueActive' : '' " placeholder="请输入备注" placeholder-style="color:#999" />
		</view>
		<view class="fllow_form">
			<view style="padding-left: 23rpx;">上传附件</view>
			<view class="form_right" @click="uploadClick">
				<view>选择附件</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<view class="imglist" v-if="imgList.length != 0">
			<view class="imgbox" v-for="(item,index) in imgList" :key="index">
				<image :src="BASE_IMG_URL+'close.png'" class="delimg" @click="delImg(index)" mode="scaleToFill"></image>
				<image :src="item.url" class="selfimg" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="fllow_file_li" v-if="fileList.length != 0">
			<view class="fil_li" v-for="(item,index) in fileList" :key="index">
				<image :src="BASE_IMG_URL+'fujian.png'" class="fileimg" mode="scaleToFill"></image>
				<view class="filename">{{item.name}}</view>
				<image :src="BASE_IMG_URL+'close.png'" class="closeimg" @click="delFile(index)" mode="scaleToFill"></image>
			</view>
		</view>
		<!-- 回款审批流程 -->
		<examine-template :remindPeople="remindPeople" title="回款审批流程" @delRemind="delRemind"></examine-template>
		
		<view id="btn" class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(saveFollow)">
			保存
		</view>
		
		
		<u-action-sheet 
			:list="uploadActions" 
			v-model="uploadShow"
			@click="uploadType"
		></u-action-sheet>

	</view>
</template>

<script>
	import { BASE_URL, SIGN_NO } from '@/util/api.js'
	import { netSelect, netAddCost } from '@/api/kehu.js'
	import { netStaffDefaultReviewer } from '@/api/index.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	import { commonF } from '@/common/common'
	export default {
		mixins:[commonF],
		data() {
			return {
				noClick:true,    //防止  重复点击
				customer_id:'',   //客户id
				consume_time:'',   //消费日期
				consume_type:'',   //消费方式
				money:'',   //消费金额
				remark:'',   //备注
				file_ids:'',   //附件id
				BASE_IMG_URL:BASE_IMG_URL,
				typeList:[],   //消费方式 列表
				index:null,
				DefaultRemind:[],
				remindPeople:[],   //提醒谁看
				remindType:'consume',
				imgList:[],
				fileList:[],
				uploadShow: false,
				uploadActions: [
					{id:1,text:'拍照',color:'#03aa96'},
					{id:2,text:'从相册中选择',color:'#03aa96'},
				],
			}
		},
		onLoad(options) {
			this.customer_id = options.kehuid
			//获取消费方式
			this.getType()
		},
		onShow() {
			//获取  默认需要提醒的人
			this.getDefaultRemind()
		},
		//监听  页面 卸载
		onUnload() {
			uni.removeStorageSync('remindlist')
		},
		methods: {	
			//消费方式
			getType() {
				netSelect().then(res=>{
					this.typeList = res.data['消费方式']
				})
			},
			//  消费日期
			changeTime(e) {
				this.consume_time = e.detail.value
			},
			//改变  消费方式
			changeType(e) {
				this.consume_type = this.typeList[e.detail.value]
			},
			// 上传附件
			uploadClick() {
				this.uploadShow = true
			},
			onCancel() {
				this.uploadShow = false
			},
			uploadType(index) {
				if(index == 0) {
					//拍照
					uni.chooseImage({
						count:1,
						sourceType:['camera'],
						success:(res)=>{
							let file = res.tempFilePaths[0]
							this.uploadFile(file,1)
						}
					})
				}else if(index == 1){
					//相册 选择
					uni.chooseImage({
						count:1,
						sourceType:['album'],
						success:(res)=>{
							let file = res.tempFilePaths[0]
							this.uploadFile(file,1)
						}
					})
				}else{
					//选择文件
					wx.chooseMessageFile({
						count:1,
						type:'file',
						success:(res)=>{
							let file = res.tempFiles[0]
							this.uploadFile(file,2)
						},
						fail:(err)=>{
							console.log(err)
						}
					})
				}
			},
			//type  上传图片1  或  文件2
			uploadFile(file,type) {
				uni.uploadFile({
					url:BASE_URL+'common/upload',
					name:'file',
					header:{
						'token':uni.getStorageSync('token'),
						'sign-no':SIGN_NO
					},
					// #ifdef MP-ALIPAY
					fileType:'image',
					// #endif
					filePath: type == 1 ? file : file.path,
					success:(res)=>{
						let data = JSON.parse(res.data)
						this.uploadShow = false
						if(data.code == 1) {
							if(type == 1) {
								this.imgList.push(data.data)
							}else{
								file = Object.assign({},file,data.data)
								this.fileList.push(file)
							}
						}else{
							uni.showToast({
								title:'上传失败',
								icon:'none'
							})
						}
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			},
			//删除 图片
			delImg(index) {
				this.imgList.splice(index,1)
			},
			//删除  文件
			delFile(index) {
				this.fileList.splice(index,1)
			},
			// 选择成员
			moreClick() {
				uni.navigateTo({
					url: '/pagesA/crm/selectMember/selectMember'
				})
			},
			//保存
			saveFollow() {
				let {
					customer_id,   //客户id
					consume_time,   //消费日期
					consume_type,   //消费方式
					money,   //消费金额
					remark,   //备注
					imgList,
					fileList,
					remindPeople,   //提醒谁看
				} = this
				
				if(!consume_time){
					uni.showToast({
						title:'请选择消费日期',
						icon:'none'
					})
					return
				}
				if(!consume_type){
					uni.showToast({
						title:'请选择消费方式',
						icon:'none'
					})
					return
				}
				if(!money){
					uni.showToast({
						title:'请填写消费金额',
						icon:'none'
					})
					return
				}
				if(!remindPeople || remindPeople.length == 0) {
					uni.showToast({
						title:'请选择流程审批人',
						icon:'none'
					})
					return
				}
				let arr = []
				imgList.forEach(ele=>{
					arr.push(ele.id)
				})
				let file_ids = arr.join(',')
				//流程审批人
				let remarr = []
				remindPeople.forEach(ele=>{
					remarr.push(ele.id)
				})
				let flow_staff_id = remarr.join(',')
				
				let params = {
					customer_id,   //客户id
					consume_time,   //消费日期
					consume_type,   //消费方式
					money,   //消费金额
					remark,   //备注
					file_ids,
					flow_staff_ids:flow_staff_id
				}
				netAddCost(params).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss">
.valueActive{
	color:#333;
}
.new_fllow {
	margin-top: 40rpx;
	font-size: 28rpx;
	.fllow_form {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding: 0 30rpx;
		color: #999;
		font-size: 32rpx;
		.form_right {
			display: flex;
			color: #999;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 28rpx 5rpx 0 0;
			}
		}
		text {
			color: #f00;
			margin-left: 10rpx;
		}
		.form_input {
			input {
				height: 100%;
				// height: 100rpx;
				// line-height: 100rpx;
				text-align: right;
			}
		}
		.fllow_button {
			margin-top: 15rpx;
		}
	}
	.fllow_file_li{
		padding:24rpx 34rpx;
		background:#fff;
		border-bottom:1rpx solid #EAEAEA;
		.fil_li{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom:14rpx;
			.fileimg{
				width:20rpx;
				height:20rpx;
			}
			.filename{
				font-size:24rpx;
				color:#999999;
			}
			.closeimg{
				width:32rpx;
				height:32rpx;
			}
		}
	}
	.imglist{
		padding:24rpx 34rpx;
		background:#fff;
		border-bottom:1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.imgbox{
			width:160rpx;
			height:160rpx;
			margin-right:14rpx;
			position: relative;
			margin-bottom:24rpx;
			border:1rpx solid #EAEAEA;
			.delimg{
				width:32rpx;
				height:32rpx;
				border-radius:50%;
				position: absolute;
				right:-16rpx;
				top:-16rpx;
				background:rgba(0,0,0,0.5);
				z-index: 2;
			}
			.selfimg{
				width:160rpx;
				height:160rpx;
			}
		}
	}
	.fllow_area {
				background-color: #fff;
				// padding: 0 70rpx;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				color: #999;
				.area_head {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					padding: 0 70rpx;
					text {
						color: #f00;
					}
				}
				textarea {
					width: 80%;
					height: 300rpx;
					padding: 30rpx;
					background: #f8f8f8;
					border-radius: 15rpx;
					margin: 0 auto;
				}
			}
	.follow_task {
		height: 80rpx;
		line-height: 80rpx;
	}
}

.fllow_file_li{
		padding:24rpx 34rpx;
		background:#fff;
		border-bottom:1rpx solid #EAEAEA;
		.fil_li{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom:14rpx;
			.fileimg{
				width:20rpx;
				height:20rpx;
			}
			.filename{
				font-size:24rpx;
				color:#999999;
			}
			.closeimg{
				width:32rpx;
				height:32rpx;
			}
		}
	}
	.imglist{
		padding:24rpx 34rpx;
		background:#fff;
		border-bottom:1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.imgbox{
			width:160rpx;
			height:160rpx;
			margin-right:14rpx;
			position: relative;
			margin-bottom:24rpx;
			border:1rpx solid #EAEAEA;
			.delimg{
				width:32rpx;
				height:32rpx;
				border-radius:50%;
				position: absolute;
				right:-16rpx;
				top:-16rpx;
				background:rgba(0,0,0,0.5);
				z-index: 2;
			}
			.selfimg{
				width:160rpx;
				height:160rpx;
			}
		}
	}
	#btn{
		width: 500rpx;
		height: 88rpx;
		background: #03AA96;
		border-radius: 29rpx;
		font-size: 34rpx;
		color: #fff;
		line-height: 88rpx;
	}
</style>
